<template>
<!--调账查询-->
  <div>
    <div class="find-account-box">
      <div style="display: flex;padding-left: 15px;padding-top: 11px;height: 30px" >
        <a  href="#">
          <div style="display: flex"  @click="firstLoading" >
            <i class="icon-query-knowledge" style="margin-top: 5px;margin-right: 5px;margin-left: 5px"></i>
            <h3>调账展示&nbsp;&nbsp;&nbsp;</h3>
          </div>
        </a>
        <div style="display: flex;margin-left: 742px">
          <span style="display: block;padding-top: 5px;font-size: 13px;font-weight: bold">调账类型:&nbsp;&nbsp;</span>
          <el-select @change="changType" v-model="selectMsg.reconciliationType" style="width: 100px" size="mini" placeholder="请选择" >
            <el-option label="采购调账" :value=1  ></el-option>
            <el-option label="销售调账" :value=2 ></el-option>
            <el-option label="开平调账" :value=3 ></el-option>
          </el-select>
          <span  style="font-size: 13px;display: block;padding-top: 5px;margin-left: 20px;font-weight: bold" > 对象&nbsp;:&nbsp;&nbsp;</span>
          <el-input v-model="selectMsg.duiXiang" size="mini"    clearable style="width: 120px;margin-right: 10px" ></el-input>
          <el-button  size="small" @click="selectMsgWay" type="danger" icon="el-icon-search" circle></el-button>
        </div>

      </div>

      <div class="find-account-box-detail">
        <el-table
          v-loading="loading"
          :data="dataList"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          size="small"
          @selection-change="handleSelectionChange"
          height="561"
          style="width: 100%"
           >
          <el-table-column
            align="center"
            label="调账编号"
            width="200"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.reconciliation_buy_id" style="font-size: 16px;font-weight: bold">{{scope.row.reconciliation_buy_id}}</span>
              <span v-if="scope.row.reconciliation_sale_id" style="font-size: 16px;font-weight: bold">{{scope.row.reconciliation_sale_id}}</span>
              <span v-if="scope.row.reconciliation_kaiping_id" style="font-size: 16px;font-weight: bold">{{scope.row.reconciliation_kaiping_id}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="类型"

            width="90"
          >
            <template slot-scope="scope">
         <span v-if="scope.row.reconciliation_buy_id" style="font-style: oblique;font-size: 16px;font-weight: bold">采购调账</span>
         <span v-if="scope.row.reconciliation_sale_id" style="font-style: oblique;font-size: 16px;font-weight: bold">销售调账</span>
         <span v-if="scope.row.reconciliation_kaiping_id" style="font-style: oblique;font-size: 16px;font-weight: bold">开平调账</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="对象"
            width="270"
          >
            <template slot-scope="scope">
              <el-button type="primary"  size="small" v-if="scope.row.reconciliation_buy_id"  >{{scope.row.supplier_name}}</el-button>
              <el-button type="primary"  size="small" v-if="scope.row.reconciliation_sale_id"  >{{scope.row.client_name}}</el-button>
              <el-button type="primary"  size="small" v-if="scope.row.reconciliation_kaiping_id"  >{{scope.row.kaipingguy_name}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="调账日期"
            width="155"
          >
            <template slot-scope="scope">
              <span  v-if="scope.row.reconciliation_buy_id"    style="font-weight: bold;font-size: 16px">{{scope.row.reconciliation_buy_time}}</span>
              <span  v-if="scope.row.reconciliation_sale_id"    style="font-weight: bold;font-size: 16px">{{scope.row.reconciliation_sale_time}}</span>
              <span  v-if="scope.row.reconciliation_kaiping_id"    style="font-weight: bold;font-size: 16px">{{scope.row.reconciliation_kaiping_time}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="经办人"
            width="130"

          >
            <template slot-scope="scope">
              <el-tag type="danger" >{{scope.row.real_name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="调账前"
            width="147"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 16px;color: #ff3526"  >{{scope.row.originally_money}}元</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="调账后"
            width="147"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 16px;color: #ff3526"  >{{scope.row.now_money}}元</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="细节"
            width="70"
          >
            <template slot-scope="scope">
              <el-button  icon="icon-xijie"   size="mini"></el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="选定"
            type="selection"
            width="46">
          </el-table-column>

        </el-table>
        <div  style="position: relative">
          <el-pagination
            align="center"
            style="margin-top: 10px"
            background
            :page-size="selectMsg.pageSize"
            :current-page="selectMsg.currentPage"
            layout="prev, pager, next"
            @current-change="changePage"
            :total="total">
          </el-pagination>
          <div style="position: absolute;right: 10px;top: 0px">

            <el-button   type="info" size="mini">删除</el-button>
          </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
import {post} from "../../utils/request";
import { RECONCILIATION_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "FindAccountRecording",
  data(){
    return{
      loading:false,
      multipleSelection:[],
      dataList:[],
      selectMsg:{
        currentPage:1,
        pageSize:RECONCILIATION_RECORDING_DATA,
        reconciliationType:1,
        duiXiang:null,
      },
      total:0,

    }
  },
  mounted() {
    this.firstLoading()
  },
  methods:{
    firstLoading() {
      this.loading = true
      var temp={
          currentPage:1,
          pageSize:RECONCILIATION_RECORDING_DATA,
          reconciliationType:1,
          duiXiang:null,
      }
      this.selectMsg=temp
      this.total=0
      post('/api/v1/find/reconciliation/data',this.selectMsg).then(resp=>{

        this.total=resp.data.total
        this.dataList=resp.data.objectList
        this.loading=false
      })


    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changType(value){
      this.loading=true
      this.selectMsg.currentPage=1
      this.selectMsg.duiXiang=null
      this.selectMsg.reconciliationType=value
      post('/api/v1/find/reconciliation/data',this.selectMsg).then(resp=>{
        this.total=resp.data.total
        this.dataList=resp.data.objectList
        this.loading=false
      })

    },
    changePage(value){
      this.loading=true
      this.selectMsg.currentPage=value
      post('/api/v1/find/reconciliation/data',this.selectMsg).then(resp=>{


        this.total=resp.data.total
        this.dataList=resp.data.objectList
        this.loading=false
      })

    },
    selectMsgWay(){

      this.loading=true
      this.selectMsg.currentPage=1
      post('/api/v1/find/reconciliation/data',this.selectMsg).then(resp=>{
        this.total=resp.data.total
        this.dataList=resp.data.objectList
        this.loading=false
      })
    },
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}

.find-account-box-detail{

  width: 1260px;
  margin-left: 15px;
  height: 617px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
.find-account-box{
  height: 674px;

  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
